/*
* 模块描述：栅格系统框架（响应式的、移动设备优先的）
* 模块兼容：Chrome（latest-1）、Firefox（latest-1）、Explorer（9+）
* 模块作者：@iyoole
* 更新时间：2017-01-23
* 其他说明：栅格暂停止使用
*/

// 构造栅格列
.make-grid-columns() {

    // 各种尺寸的网格列的常见样式，宽度为 1 - 12
    .col(@index) {
        @item: ~".clo-xs-@{index}, .clo-sm-@{index}, .clo-md-@{index}, .clo-lg-@{index}";
        .col((@index + 1), @item);
    }

    .col(@index, @list) when (@index =< @grid-columns) {
        @item: ~".clo-xs-@{index}, .clo-sm-@{index}, .clo-md-@{index}, .clo-lg-@{index}";
        .col((@index + 1), ~"@{list}, @{item}");
    }

    .col(@index, @list) when (@index > @grid-columns) {
        @{list} {
            position: relative;

            // 防止列空时塌陷
            min-height: 1px;

            // 通过填充内部 padding 创建 gutter（排水沟）
            padding-left: ceil((@grid-gutter-width / 2)); // 向上取整
            padding-right: floor((@grid-gutter-width / 2)); // 向下取整
        }
    }

    // 启动它
    .col(1);

}

// 浮动栅格列
.float-grid-columns(@class) {

    .col(@index) {
        @item: ~".col-@{class}-@{index}";
        .col((@index + 1), @item);
    }

    .col(@index, @list) when (@index =< @grid-columns) {
        @item: ~".col-@{class}-@{index}";
        .col((@index + 1), ~"@{list}, @{item}");
    }

    .col(@index, @list) when (@index > @grid-columns) {
        @{list} {
            float: left;
        }
    }

    .col(1);

}

// 计算栅格列
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
    .col-@{class}-@{index} {
        width: percentage((@index / @grid-columns)); // 百分比
    }
}

.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
    .col-@{class}-push-@{index} {
        left: percentage((@index / @grid-columns)); // 百分比
    }
}

.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
    .col-@{class}-push-0 {
        left: auto;
    }
}

.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
    .col-@{class}-pull-@{index} {
        right: percentage((@index / @grid-columns)); // 百分比
    }
}

.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
    .col-@{class}-push-0 {
        right: auto;
    }
}

.calc-grid-column(@index, @class, @type) when (@type = offset) {
    .col-@{class}-offset-@{index} {
        margin-left: percentage((@index / @grid-columns)); // 百分比
    }
}

// 循环栅格列
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
    .calc-grid-column(@index, @class, @type);

    // 下一个迭代
    .loop-grid-columns((@index - 1), @class, @type);
}

// 为特定的类创建栅格
.make-grid(@class) {
    .float-grid-columns(@class);
    .loop-grid-columns(@grid-columns, @class, width);
    .loop-grid-columns(@grid-columns, @class, pull);
    .loop-grid-columns(@grid-columns, @class, push);
    .loop-grid-columns(@grid-columns, @class, offset);
}
